<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
	<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="statics/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

	<div class="container" id="aui-header">
		<h2>充值金额</h2>
		<div class="quick-pay">
			<ul>

				<li :class="current==index?'active':''" v-for="(item,index) in pay_list"
					@tap="money_change(item.money,item.send_money,index)">
					<div style="margin:5px 10px">
						<div style="height:20px;"><span>{{item.money}}</span>元</div>
						<div style="height:20rpx;font-size:12px"><span>赠送{{item.send_money}}</span>元</div>
					</div>

				</li>
			</ul>
		</div>
		<h2>其他充值金额</h2>

		<div class="other-pay" @tap="money_change(money,0)">
			<div><input type="text" name="money" placeholder="0" v-model="money" /></div>
			<div class="other-money">{{smallToBig(money)}}</div>
		</div>

		<h2>支付方式</h2>
		<div class="pay-type">
			<ul>
				<li class="active" @tap="pay_change('Wxpay')">
					<div class="type">
						<i class="wx"></i>
						<span>微信支付</span>
					</div>
					<i class="check"></i>
				</li>
				<li @tap="pay_change('Alipay')">
					<div class="type">
						<i class="ali"></i>
						<span>支付宝支付</span>
					</div>
					<i class="check"></i>
				</li>
				<!-- <li  @tap="pay_change('Alipay')">
					<div class="type">
						<i class="bank"></i>
						<span>银联支付</span>
					</div>
					<i class="check"></i>
				</li> -->

			</ul>
			<!-- <p class="more">+&nbsp;<span>点击查看更多</span></p> -->
		</div>
		<!--充值金额-->
		<div class="money">
			<p>充值金额<span>￥ <i>{{money}}</i></span></p>
			<button @click="submit">充值</button>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#aui-header",
		data: {
			pay_list: '',
			current_index: 0,
			money: 0,
			channel: 'Wxpay',
			send_money: 0,
			current: 0,
		},
		methods: {
			smallToBig(money) {
				//  将数字金额转换为大写金额
				var cnNums = new Array(
					"零",
					"壹",
					"贰",
					"叁",
					"肆",
					"伍",
					"陆",
					"柒",
					"捌",
					"玖"
				); //汉字的数字
				var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
				var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
				var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
				var cnInteger = "整"; //整数金额时后面跟的字符
				var cnIntLast = "元"; //整数完以后的单位
				//最大处理的数字
				var maxNum = 999999999999999.9999;
				var integerNum; //金额整数部分
				var decimalNum; //金额小数部分
				//输出的中文金额字符串
				var chineseStr = "";
				var parts; //分离金额后用的数组，预定义
				if (money == "") {
					return "";
				}

				money = parseFloat(money);
				if (money >= maxNum) {
					//超出最大处理数字
					return "超出最大处理数字";
				}
				if (money == 0) {
					chineseStr = cnNums[0] + cnIntLast + cnInteger;
					return chineseStr;
				}

				//四舍五入保留两位小数,转换为字符串
				money = Math.round(money * 100).toString();
				integerNum = money.substr(0, money.length - 2);
				decimalNum = money.substr(money.length - 2);

				//获取整型部分转换
				if (parseInt(integerNum, 10) > 0) {
					var zeroCount = 0;
					var IntLen = integerNum.length;
					for (var i = 0; i < IntLen; i++) {
						var n = integerNum.substr(i, 1);
						var p = IntLen - i - 1;
						var q = p / 4;
						var m = p % 4;
						if (n == "0") {
							zeroCount++;
						} else {
							if (zeroCount > 0) {
								chineseStr += cnNums[0];
							}
							//归零
							zeroCount = 0;
							chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
						}
						if (m == 0 && zeroCount < 4) {
							chineseStr += cnIntUnits[q];
						}
					}
					chineseStr += cnIntLast;
				}
				//小数部分
				if (decimalNum != "") {
					var decLen = decimalNum.length;
					for (var i = 0; i < decLen; i++) {
						var n = decimalNum.substr(i, 1);
						if (n != "0") {
							chineseStr += cnNums[Number(n)] + cnDecUnits[i];
						}
					}
				}
				if (chineseStr == "") {
					chineseStr += cnNums[0] + cnIntLast + cnInteger;
				} else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
					chineseStr += cnInteger;
				}
				return chineseStr;
			},
			get_list: function () {
				console.log($api.getStorage('token'))
				get_data('api/MemberRecharge/index', {
					token: $api.getStorage('token'),
				}, function (ret) {
					console.log(JSON.stringify(ret.data))
					if (ret.status == 1) {
						vm.pay_list = ret.data
						vm.money = ret.data[0].money
						vm.send_money = ret.data[0].send_money;
					}
				})
			},
			money_change: function (money, send_money, index) {
				vm.money = money;
				vm.send_money = send_money;
				vm.current = index;
			},
			pay_change: function (pay_type) {
				vm.channel = pay_type
			},
			submit: function () {

				var channel = vm.channel

				if (!vm.money) {
					alert('请输入充值金额')
				}

				get_data('payment/RechargePay/createOrder', {
					token: $api.getStorage('token'),
					order_type: vm.channel,
					money: vm.money,
					send_money: vm.send_money
				}, function (ret, err) {

					$api.setStorage('rechargeinfo', {
						pay_price: ret.data.pay_price,
						order_num: ret.data.order_num,
						order_id: ret.data.order_id
					})

					vm.pay(ret.data.order_id);

				});
			},
			pay: function (order_id) {
				let channel = vm.channel;
				get_data('payment/RechargePay/purchase_recharge', {
					token: $api.getStorage('token'),
					order_id: order_id,
					order_type: vm.channel,
				}, function (ret, err) {
					console.log(9999)
					console.log(JSON.stringify(ret))
					// return;

					// alert(JSON.stringify(ret))
					if (ret.status) {
						var orderinfo = ret.data;
						if (channel == 'Wxpay') {
							//console.log(JSON.stringify(ret.data.payOrder))
							var wxPay = api.require('wxPayPlus');
							wxPay.payOrder(ret.data.payOrder, function (ret, err) {
								// alert(JSON.stringify(ret))
								// alert(JSON.stringify(err))
								// console.log(JSON.stringify(ret))
								if (ret.status) {
									pay_res(1)
									send_event('recharge_chang')
									setTimeout(function () {
										close_win()
									}, 1000)
								} else {
									if (err.code == '-2')
										pay_res(0)
									setTimeout(function () {
										close_win()
									}, 1000)
								}
							});
						}
						if (channel == 'Alipay') {
							// alert(JSON.stringify(ret.data.payOrder))
							var alipay = api.require('aliPayPlus');
							alipay.payOrder({
								orderInfo: ret.data.payOrder
							}, function (ret, err) {
								// alert(ret.code)
								// alert(err)
								if (ret.code == '9000') {
									pay_res(1)
									send_event('recharge_chang')
									if (api.systemType != 'android') {
										close_win()
									}
									setTimeout(function () {
										close_win()
									}, 1000)
								} else if (ret.code == '4006') {
									pay_res(0)
									if (api.systemType != 'android') {
										close_win()
									}
									setTimeout(function () {
										close_win()
									}, 1000)
								} else if (ret.code == '4003') {
									pay_res(0)
									if (api.systemType != 'android') {
										close_win()
									}
									setTimeout(function () {
										close_win()
									}, 1000)
									//								toast('您绑定的支付宝账户被冻结或不允许支付');
								} else if (ret.code == '6000') {
									pay_res(0)
									if (api.systemType != 'android') {
										close_win()
									}
									setTimeout(function () {
										close_win()
									}, 1000)
									//								toast('支付服务正在进行升级操作');
								} else if (ret.code == '6001') {
									pay_res(0)
									if (api.systemType != 'android') {
										close_win()
									}
									setTimeout(function () {
										close_win()
									}, 1000)
									//								toast('您已取消付款');
								}
							});
						}
						if (channel == 'UnionPay') {
							var unPay = api.require('unionPay');
							unPay.pay({
								tn: ret.data.tn,
								devMode: true
							}, function (ret, err) {
								if (ret.result == 'success') {
									pay_res(1)
									send_event('recharge_chang')
									if (api.systemType != 'android') {
										close_win()
									}
									setTimeout(function () {
										close_win()
									}, 1000)
								} else {
									pay_res(0)
									if (api.systemType != 'android') {
										close_win()
									}
									setTimeout(function () {
										close_win()
									}, 1000)
								}
							});
						}
					} else {
						toast(ret.msg)
					}
				})
			}

		}
	})

	apiready = function () {
		$api.fixStatusBar($api.byId('aui-header'))
		vm.get_list()
	};

	function pay_res(res, orderinfo) {
		// send_event('tuan_ref')
		$api.setStorage('recharge_pay_res', res)
		open_win('pay_recharge', '../cart/pay_recharge.html', false)
	}
</script>
<script type="text/javascript">
	// 快捷支付
	$('.quick-pay ul li').click(function () {
		var money = $(this).find('span').text()
		$(this).addClass('active').siblings().removeClass('active')
		$('.money').find('i').text(money)
	})
	// 其他金额
	$('.other-pay input').bind('input propertychange', function () {
		if (!/^[0-9]*$/.test($(this).val()) || $(this).val() < 0) {
			// $(this).val("")
			// alert('请输入正确金额')
			// return
		}
		$('.quick-pay ul li').removeClass('active')
		var money = $(this).val()
		$('.money').find('i').text(money)
	})
	// 支付方式选择
	$('.pay-type ul li').click(function () {
		$(this).addClass('active').siblings().removeClass('active')
	})
	// 查看更多
	$('.pay-type .more').click(function () {
		$(this).css('visibility', 'hidden')
		$('.pay-type ul li').removeClass('hidden')
	})
</script>